<template>
  <el-row>
    <el-form :inline='true' :model='query' class='demo-form-inline'>
      <el-form-item label='集群'>
        <el-select v-model='query.cluster' :default-first-option='true'>
          <el-option label='所有集群' value=''></el-option>
          <el-option label='集群1' value='cluster01'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label='名称'>
        <el-input v-model='query.user' placeholder='请输入topic名称'
                  :suffix-icon='Search'></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type='primary' @click='onSubmit'>查询</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <el-row>

    <el-table :data='tableData' style='width: 100%'>
      <el-table-column prop='topicName' label='Topic名称' sortable width='180' />
      <el-table-column prop='clusterName' label='集群名称' sortable width='180' />
      <el-table-column prop='topicDesc' label='Topic描述' />
      <el-table-column prop='address' label='负责人' sortable />
      <el-table-column prop='operation' label='操作' />
    </el-table>

  </el-row>
</template>

<script lang='ts'>
import { Options, Vue } from 'vue-class-component';
import { Search } from '@element-plus/icons-vue';
import { TopicSummary, TopicQuery } from '@/types/kafka-admin/topic-types';

@Options({
  components: { Search },
})
export default class TopicsManagement extends Vue {
  private query: TopicQuery = {
    topic: '',
    cluster: '',
  };

  private tableData: TopicSummary[] = [];

  // eslint-disable-next-line class-methods-use-this
  private onSubmit(): void {
    console.log('onSubmit');
  }
}
</script>
